<template>
    <div>
        <el-col :offset="1" :span="22">
            <el-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>我的帖子</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
            <div style="height: 20px"/>
            <el-card>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="title" label="标题" width="180"/>

                    <el-table-column prop="state" label="状态" width="100">
                        <template slot-scope="scope">
                        <span v-if="scope.row.state == -1">
                            <el-tag type="danger">审核中</el-tag>
                        </span>
                        </template>
                        <template slot-scope="scope">
                        <span v-if="scope.row.state == 0">
                            <el-tag type="success">正常</el-tag>
                        </span>
                            <span v-if="scope.row.state == -1">
                            <el-tag type="warning">审核中</el-tag>
                        </span>
                            <span v-if="scope.row.state == 1">
                            <el-tag type="danger">审核被拒</el-tag>
                        </span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="createTime" label="创建日期" width="100"/>

                    <el-table-column  label="操作" width="450">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)"  type="success" size="mini">查看</el-button>
                            <div style="width: 10px;display:inline-block;"/>
                            <!--  重新申请   -->
                            <span v-if="scope.row.state == 1">
                            <el-button @click="changeState(scope.row,'-1','新的申请已提交')"
                                       type="warning"
                                       size="mini">重新申请</el-button>
                                <div style="width: 10px;display:inline-block;"/>
                        </span>
                            <!--  加精 -->
                            <span v-if="scope.row.start == 0">
                            <el-button  @click="starApply(scope.row)" type="info" size="mini">申请加精</el-button>
                                <div style="width: 10px;display:inline-block;"/>
                        </span>
                            <!--  置顶 -->
                            <span v-if="scope.row.top == 0">
                            <el-button @click="topApply(scope.row)" type="primary" size="mini">申请置顶</el-button>
                                <div style="width: 10px;display:inline-block;"/>
                        </span>
                            <!--  锁定 -->
                            <span v-if="scope.row.clock == 0">
                            <el-button @click="clockApply(scope.row)" type="warning" size="mini">申请锁定</el-button>
                                <div style="width: 10px;display:inline-block;"/>
                        </span>

                            <!-- 删除 -->
                            <el-button @click="deletePosts(scope.row)" type="danger" size="mini">删除</el-button>
                            <div style="width: 10px;display:inline-block;"/>

                        </template>
                    </el-table-column>

                </el-table>

                <el-dialog title="帖子详情" :visible.sync="dialogVisible" width="30%" >
                    <div style="width: 20%;border-color: chocolate">标题：</div>
                    <div style="width: 100%;">{{titleCache}}</div>
                    <div style="width: 20%;">内容：</div>
                    <div style="width: 100%;height:150px">{{commentCache}}</div>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
                </el-dialog>

                <div style="height:20px;"/>
                <el-pagination background layout="prev, pager, next"
                               :total="long" @current-change="handleCurrentChange"/>
                <div style="height: 20px;"/>
            </el-card>
        </el-col>
    </div>
</template>

<script>
    export default {
        name: "showMyPosts",
        created() {
            // 1 获得长度
            this.$axios.get("/api/posts/getPostsByUserIdLong",)
            .then(req=>{
                this.long = req.data.data;
            })
            // 获得数据
            this.$axios.get("/api/posts/getPostsByUserId",{
                params:{
                    page:this.page
                }
            })
            .then(req=>{
                console.log(req.data.data);
                this.tableData = req.data.data;
            })
        },
        data(){
            return{
                long:'1',
                page:'1',
                visible:false,
                dialogVisible:false,
                titleCache:'',
                commentCache:'',
                tableData:[{
                    id: '',
                    userId: '',
                    plateId: '',
                    createTime: '',
                    title: '',
                    comment: '',
                    state: '',
                    start: '',
                    top: '',
                    clock:''
                },]
            }
        },
        methods:{
            // 新请求
            handleCurrentChange(val){
                this.page = val;
                this.$axios.get("/api/posts/getPostsByUserId",{
                    params:{
                        page:this.page
                    }
                })
                .then(req=>{
                    console.log(req.data.data);
                    this.tableData = req.data.data;
                })

            },
            // 删除
            deletePosts(row){
                const id = row.id;
                this.$axios.get("/api/posts/deletePosts",{
                    params:{
                        id:id
                    }
                })
                .then(req=>{
                    this.$message.success("删除成功");
                    location.reload();
                })
            },
            // 锁定
            clockApply(row){
                const tmp = row;
                tmp.clock = '11';
                this.$axios.post("/api/posts/changePostsState",tmp)
                    .then(req=>{
                        this.$message.success("申请已提交");
                        location.reload();
                    })
            },
            // 加精
            starApply(row){
                const tmp = row;
                tmp.start = '11';
                this.$axios.post("/api/posts/changePostsState",tmp)
                    .then(req=>{
                        this.$message.success("申请已提交");
                        location.reload();
                    })
            },
            // 置顶
            topApply(row){
                const tmp = row;
                tmp.top = '11';
                this.$axios.post("/api/posts/changePostsState",tmp)
                    .then(req=>{
                        this.$message.success("申请已提交");
                        location.reload();
                    })
            },
            // 修改状态
            changeState(row,state,text){
                const tmp = row;
                tmp.state = state;
                this.$axios.post("/api/posts/changePostsState",tmp)
                    .then(req=>{
                        this.$message.success(text);
                    })
            },
            goHome:function () {
                this.$router.push("/home")
            },
            handleClick(row) {
                this.dialogVisible = true;
                this.titleCache = row.title;
                this.commentCache = row.comment;
                console.log(row);
            }
        }
    }
</script>

<style scoped>
    #head{
        width: 100%;
        height: 30px;
        background: rgba(167,171,183,0.8);
        position:fixed;
    }
</style>
